<template>
	<div class="swiper lun-swiper">
		<ul class="swiper-wrapper">
			<li class="swiper-slide" v-for="item in list" :key="item.id">
				<img :src="item.img" />
			</li>
		</ul>
		<div class="swiper-pagination lunbo-pagination"></div>
		<!--分页器。如果放置在swiper外面，需要自定义样式。-->
	</div>
</template>

<script>
	//1.引入vue周期函数
	import {
		onMounted
	} from 'vue';
	//2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';

	//3.说明swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);

	export default{
		name:'Lunbo',
		data(){
			return{
				list:[
					{id:1,img:'swiperimg/swiper1.jfif'},
					{id:2,img:'swiperimg/swiper2.jfif'},
					{id:3,img:'swiperimg/swiper3.jpeg'}
				]
			}
		},
	//4.设置应用swiper的位置以及具体操作
	setup() {
		onMounted(() => {
			new Swiper('.lun-swiper', {
				//循环播放
				loop: true,
				//设置分页器效果
				pagination: {
					el: '.lunbo-pagination'
				},
				//设置播放项：时间，不停止，手指经过不暂停自动
				autoplay: {
					deplay: 1000,
					stopOnLastSlide: false,
					disableOnInteraction: false
				}
			})
		})
	}
	}
</script>
<style scoped>
	.lun-swiper {
		width: 100%;
		height: 5.6rem;
	}

	.lun-swiper img {
		width: 100%;
		height: 100%;
	}
	.lunbo-pag :deep(.swiper-pagination-bullet-active)  {
		background-color: #ffff00;
		width: 0.5rem;
	}
</style>
